import React from "react";
import AxCarousel from './Carousel'
import AxNotice from './Notice'
import s from './index.scss'
import {Flex} from 'antd-mobile'
import icon1 from 'assets/images/icon1.png'
import icon2 from 'assets/images/icon2.png'
import icon3 from 'assets/images/icon3.png'
import zcSign from 'assets/images/zcSign.jpg'

import Footer from 'components/Footer'
import AxHeader from 'components/AxHeader'
import Announcement from 'components/Announcement'

import {hashHistory} from 'React-Router'
import Link from 'components/Link'

import { Login } from "actions/login";

import { connect } from "react-redux";


@connect(
  state => ({
    common: state.common,
    login: state.login
  }),
  {
    Login
  }
)

export default class extends  React.Component{
constructor(props){
  super(props)
  this.state={}
}
onLink=(url,flag)=>{

  hashHistory.replace(url)
  
}

render(){
  let that = this
  let { Login } = this.props;
  let {carouselList,username,notice,homeLoan,activeBannerList} = this.props
  let {isLogin} = this.props.login
  let rightStr = (<div><span onClick={()=>{
    hashHistory.push('/my')
  }}>{username}</span>&nbsp;|&nbsp;<span onClick={()=>{
      localStorage.removeItem('isLogin')
      localStorage.removeItem('userData')
      Login(false)
      }}>退出</span></div>)

return(<div>
<Announcement/>
{isLogin?<AxHeader right={rightStr}/>:null}
  <AxCarousel
    carouselList={carouselList}
  />
  <AxNotice
    flag={1}
    leftImgUrl={<img src={require(`assets/images/icon5.png`)}/>}
    right={true}
    notice={notice}
  />
  <div>
    <Flex className={`${s.oneBox}`}>
      <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/platformData')}>
        <img src={icon1} />
        <span>平台数据</span>
      </Flex.Item>
      <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/securityProtection')}>
        <img src={icon2} />
        <span>安全保障</span>
      </Flex.Item>
      <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/novice')}>
        <img src={icon3} />
        <span>新手有礼</span>
      </Flex.Item>
     
    </Flex>
  </div>
  <Flex className={`block10`}/>
  
  
    {isLogin?<div><AxNotice
    flag={0}
    title={'标的推荐'}
    leftImgUrl={<img src={require(`assets/images/icon6.png`)}/>}
    right={false}
  /><Flex className={`${s.twoBox}`} direction="row"><Flex.Item className={`${s.item} ${s.borderRight}`}>
        <Flex direction="column" onClick={()=>{
          hashHistory.push('projectList/DirectDetail/'+homeLoan.loanId)
        }}>
        <Flex.Item >
          <span className={`${s.font40}`}>{homeLoan.annualrate.split('.')[0]}.</span><span className={`${s.font16}`}>{homeLoan.annualrate.split('.')[1]}%</span>
        </Flex.Item>
        <Flex.Item>
          <span  className={`${s.font12}`}>预期收益</span>
        </Flex.Item>
        </Flex>
      </Flex.Item>
      <Flex.Item className={`${s.item}`}>
      <Flex direction="column">
        <Flex.Item>
        <span  className={`${s.font12}`}>项目期限</span>
        <span  className={`${s.font16} ${s.marF16}`}>{homeLoan.term}</span>
        </Flex.Item>
        <Flex.Item>
        <span  className={`${s.font12}`}>起投金额</span>
        <span  className={`${s.font16} ${s.marF16}`}>{homeLoan.amount}</span>
        </Flex.Item>
        </Flex>
      </Flex.Item></Flex></div>:<Flex className={`${s.twoBox}`} direction="row"><Flex.Item><Link href="/register"><img src={zcSign} style={{width:"100%"}}/></Link></Flex.Item></Flex>}

  <Flex className={`block10`}/>
  <AxNotice
    flag={0}
    title={'热门推荐'}
    leftImgUrl={<img src={require(`assets/images/icon7.png`)}/>}
    right={false}
  />
  <div>
    <Flex className={`${s.threeBox}`} direction="column">
      <Flex.Item className={`${s.item}`} >
      <Link href={activeBannerList[0].imgUrl}>
        <img src={activeBannerList[0].imgPath}/>
      </Link>
      </Flex.Item>
      <Flex.Item className={`${s.item}`} >
      <Link href={activeBannerList[1].imgUrl}>
        <img src={activeBannerList[1].imgPath}/>
      </Link>
      </Flex.Item>
      {/* <Flex.Item className={`${s.item}`} >
      <Link href={activeBannerList[2].imgUrl}>
        <img src={activeBannerList[2].imgPath}/>
      </Link>
      </Flex.Item> */}
    </Flex>

  </div>
  <Footer/>
</div>)
}
}
 
